Chapter 13: React Router Essentials

src/
├── App.tsx          ← Traditional multi-page approach
├── pages/
│   ├── Home.tsx
│   ├── Docs.tsx
│   └── About.tsx
└── main.tsx

// src/pages/Home.tsx
export function Home() {
  console.log('Home component rendered');

  return (
    <div>
      <h1>Documentation Home</h1>
      <p>Welcome to our documentation site.</p>
      <nav>
        <a href="/docs">View Docs</a> | <a href="/about">About Us</a>
      </nav>
    </div>
  );
}

// src/pages/Docs.tsx
export function Docs() {
  console.log('Docs component rendered');

  return (
    <div>
      <h1>Documentation</h1>
      <p>Here's how to use our product...</p>
      <nav>
        <a href="/">Home</a> | <a href="/about">About Us</a>
      </nav>
    </div>
  );
}

// src/pages/About.tsx
export function About() {
  console.log('About component rendered');

  return (
    <div>
      <h1>About Us</h1>
      <p>We build great documentation tools.</p>
      <nav>
        <a href="/">Home</a> | <a href="/docs">View Docs</a>
      </nav>
    </div>
  );
}

// src/App.tsx - Version 1: Traditional approach
import { Home } from './pages/Home';
import { Docs } from './pages/Docs';
import { About } from './pages/About';

export function App() {
  // Determine which page to show based on URL
  const path = window.location.pathname;

  if (path === '/docs') return <Docs />;
  if (path === '/about') return <About />;
  return <Home />;
}

Home component rendered
[Page reload - all logs cleared]
Docs component rendered
[Page reload - all logs cleared]
Home component rendered

npm install react-router-dom

// src/App.tsx - Version 2: With React Router
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { Home } from './pages/Home';
import { Docs } from './pages/Docs';
import { About } from './pages/About';

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/docs" element={<Docs />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

// src/pages/Home.tsx - Updated with Link components
import { Link } from 'react-router-dom';

export function Home() {
  console.log('Home component rendered');

  return (
    <div>
      <h1>Documentation Home</h1>
      <p>Welcome to our documentation site.</p>
      <nav>
        <Link to="/docs">View Docs</Link> | <Link to="/about">About Us</Link>
      </nav>
    </div>
  );
}

// src/pages/Docs.tsx - Updated with Link components
import { Link } from 'react-router-dom';

export function Docs() {
  console.log('Docs component rendered');

  return (
    <div>
      <h1>Documentation</h1>
      <p>Here's how to use our product...</p>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About Us</Link>
      </nav>
    </div>
  );
}

// src/pages/About.tsx - Updated with Link components
import { Link } from 'react-router-dom';

export function About() {
  console.log('About component rendered');

  return (
    <div>
      <h1>About Us</h1>
      <p>We build great documentation tools.</p>
      <nav>
        <Link to="/">Home</Link> | <Link to="/docs">View Docs</Link>
      </nav>
    </div>
  );
}

Home component rendered
Docs component rendered
About component rendered
Home component rendered

// Conceptual implementation (simplified)
function BrowserRouter({ children }) {
  const [location, setLocation] = useState(window.location.pathname);

  useEffect(() => {
    // Listen for browser back/forward button
    const handlePopState = () => {
      setLocation(window.location.pathname);
    };

    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  // Provide location and navigation function to children
  return (
    <RouterContext.Provider value={{ location, navigate: (path) => {
      window.history.pushState({}, '', path);
      setLocation(path);
    }}}>
      {children}
    </RouterContext.Provider>
  );
}

function Link({ to, children }) {
  const { navigate } = useContext(RouterContext);

  return (
    <a 
      href={to}
      onClick={(e) => {
        e.preventDefault(); // Stop browser navigation
        navigate(to);       // Update URL and trigger re-render
      }}
    >
      {children}
    </a>
  );
}

// src/components/Layout.tsx - New file
import { Link, Outlet } from 'react-router-dom';

export function Layout() {
  return (
    <div className="app-layout">
      <header>
        <nav className="main-nav">
          <Link to="/">Home</Link>
          <Link to="/docs">Docs</Link>
          <Link to="/about">About</Link>
        </nav>
      </header>

      <main>
        <Outlet /> {/* Child routes render here */}
      </main>

      <footer>
        <p>© 2025 Documentation Site</p>
      </footer>
    </div>
  );
}

// src/App.tsx - Version 3: With shared layout
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './pages/Home';
import { Docs } from './pages/Docs';
import { About } from './pages/About';

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="docs" element={<Docs />} />
          <Route path="about" element={<About />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

// src/pages/Home.tsx - Version 3: Simplified (no navigation)
export function Home() {
  return (
    <div>
      <h1>Documentation Home</h1>
      <p>Welcome to our documentation site.</p>
    </div>
  );
}

// src/pages/Docs.tsx - Version 3: Simplified
export function Docs() {
  return (
    <div>
      <h1>Documentation</h1>
      <p>Here's how to use our product...</p>
    </div>
  );
}

// src/pages/About.tsx - Version 3: Simplified
export function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>We build great documentation tools.</p>
    </div>
  );
}

// src/components/Layout.tsx - Version 2: With active link styling
import { NavLink, Outlet } from 'react-router-dom';
import './Layout.css';

export function Layout() {
  return (
    <div className="app-layout">
      <header>
        <nav className="main-nav">
          <NavLink 
            to="/" 
            className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
          >
            Home
          </NavLink>
          <NavLink 
            to="/docs"
            className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
          >
            Docs
          </NavLink>
          <NavLink 
            to="/about"
            className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
          >
            About
          </NavLink>
        </nav>
      </header>

      <main>
        <Outlet />
      </main>

      <footer>
        <p>© 2025 Documentation Site</p>
      </footer>
    </div>
  );
}

/* src/components/Layout.css */
.main-nav {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #f5f5f5;
}

.nav-link {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
  transition: background 0.2s;
}

.nav-link:hover {
  background: #e0e0e0;
}

.nav-link.active {
  background: #007bff;
  color: white;
  font-weight: bold;
}

// src/pages/Docs.tsx - Version 4: With programmatic navigation
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

export function Docs() {
  const navigate = useNavigate();
  const [searchQuery, setSearchQuery] = useState('');

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();

    if (searchQuery.trim()) {
      // Navigate to search results page (we'll build this later)
      navigate(`/docs/search?q=${encodeURIComponent(searchQuery)}`);
    }
  };

  const handleBackToHome = () => {
    // Navigate back to home
    navigate('/');
  };

  return (
    <div>
      <h1>Documentation</h1>

      <form onSubmit={handleSearch}>
        <input
          type="text"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          placeholder="Search docs..."
        />
        <button type="submit">Search</button>
      </form>

      <p>Here's how to use our product...</p>

      <button onClick={handleBackToHome}>
        Back to Home
      </button>
    </div>
  );
}

// Navigate to a path
navigate('/about');

// Navigate with relative path
navigate('../'); // Go up one level
navigate('settings'); // Go to sibling route

// Navigate with state (accessible in destination component)
navigate('/docs', { state: { fromSearch: true } });

// Replace current history entry (back button won't return here)
navigate('/login', { replace: true });

// Navigate backwards/forwards in history
navigate(-1); // Go back
navigate(-2); // Go back twice
navigate(1);  // Go forward

No routes matched location "/nonexistent"

// src/pages/NotFound.tsx - New file
import { Link } from 'react-router-dom';

export function NotFound() {
  return (
    <div style={{ textAlign: 'center', padding: '2rem' }}>
      <h1>404 - Page Not Found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <Link to="/">Go back home</Link>
    </div>
  );
}

// src/App.tsx - Version 4: With 404 handling
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './pages/Home';
import { Docs } from './pages/Docs';
import { About } from './pages/About';
import { NotFound } from './pages/NotFound';

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="docs" element={<Docs />} />
          <Route path="about" element={<About />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

// src/pages/Home.tsx - Version 4: Passing state on navigation
import { useNavigate } from 'react-router-dom';

export function Home() {
  const navigate = useNavigate();

  const handleGetStarted = () => {
    navigate('/docs', { 
      state: { 
        fromHome: true,
        timestamp: Date.now() 
      } 
    });
  };

  return (
    <div>
      <h1>Documentation Home</h1>
      <p>Welcome to our documentation site.</p>
      <button onClick={handleGetStarted}>Get Started</button>
    </div>
  );
}

// src/pages/Docs.tsx - Version 5: Receiving navigation state
import { useLocation, useNavigate } from 'react-router-dom';

export function Docs() {
  const location = useLocation();
  const navigate = useNavigate();

  // Access state passed from previous navigation
  const fromHome = location.state?.fromHome;
  const timestamp = location.state?.timestamp;

  return (
    <div>
      <h1>Documentation</h1>

      {fromHome && (
        <div style={{ background: '#e3f2fd', padding: '1rem', marginBottom: '1rem' }}>
          Welcome! You navigated here from the home page at {new Date(timestamp).toLocaleTimeString()}.
        </div>
      )}

      <p>Here's how to use our product...</p>

      <button onClick={() => navigate('/')}>
        Back to Home
      </button>
    </div>
  );
}

src/
├── components/
│   └── Layout.tsx
├── pages/
│   ├── Home.tsx
│   ├── Docs.tsx          ← Will become docs index
│   ├── DocPage.tsx       ← New: Individual doc pages
│   ├── About.tsx
│   └── NotFound.tsx
└── data/
    └── docs.ts           ← New: Documentation content

// src/data/docs.ts - Documentation content database
export interface DocContent {
  id: string;
  title: string;
  content: string;
  category: string;
}

export const docsDatabase: DocContent[] = [
  {
    id: 'getting-started',
    title: 'Getting Started',
    content: 'Learn how to set up and use our product...',
    category: 'Basics'
  },
  {
    id: 'api-reference',
    title: 'API Reference',
    content: 'Complete API documentation...',
    category: 'Reference'
  },
  {
    id: 'deployment',
    title: 'Deployment Guide',
    content: 'How to deploy your application...',
    category: 'Advanced'
  },
  {
    id: 'troubleshooting',
    title: 'Troubleshooting',
    content: 'Common issues and solutions...',
    category: 'Support'
  }
];

export function getDocById(id: string): DocContent | undefined {
  return docsDatabase.find(doc => doc.id === id);
}

export function getAllDocs(): DocContent[] {
  return docsDatabase;
}

// src/pages/Docs.tsx - Version 6: Documentation index page
import { Link } from 'react-router-dom';
import { getAllDocs } from '../data/docs';

export function Docs() {
  const docs = getAllDocs();

  // Group docs by category
  const categories = docs.reduce((acc, doc) => {
    if (!acc[doc.category]) {
      acc[doc.category] = [];
    }
    acc[doc.category].push(doc);
    return acc;
  }, {} as Record<string, typeof docs>);

  return (
    <div>
      <h1>Documentation</h1>
      <p>Browse our documentation by category:</p>

      {Object.entries(categories).map(([category, categoryDocs]) => (
        <div key={category} style={{ marginBottom: '2rem' }}>
          <h2>{category}</h2>
          <ul>
            {categoryDocs.map(doc => (
              <li key={doc.id}>
                <Link to={`/docs/${doc.id}`}>{doc.title}</Link>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

// src/pages/DocPage.tsx - New file: Individual documentation page
import { useParams, Link, Navigate } from 'react-router-dom';
import { getDocById } from '../data/docs';

export function DocPage() {
  // Extract the 'id' parameter from the URL
  const { id } = useParams<{ id: string }>();

  // Fetch the documentation content
  const doc = id ? getDocById(id) : undefined;

  // If doc doesn't exist, redirect to 404
  if (!doc) {
    return <Navigate to="/404" replace />;
  }

  return (
    <div>
      <nav style={{ marginBottom: '1rem' }}>
        <Link to="/docs">← Back to all docs</Link>
      </nav>

      <article>
        <h1>{doc.title}</h1>
        <p style={{ color: '#666', fontSize: '0.9rem' }}>
          Category: {doc.category}
        </p>
        <div style={{ marginTop: '2rem' }}>
          {doc.content}
        </div>
      </article>
    </div>
  );
}

// src/App.tsx - Version 5: With dynamic routes
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import { Home } from './pages/Home';
import { Docs } from './pages/Docs';
import { DocPage } from './pages/DocPage';
import { About } from './pages/About';
import { NotFound } from './pages/NotFound';

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="docs">
            <Route index element={<Docs />} />
            <Route path=":id" element={<DocPage />} />
          </Route>
          <Route path="about" element={<About />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

(No errors - smooth navigation)

(No errors - redirect happens cleanly)

// In DocPage.tsx
if (!doc) {
  return <Navigate to="/404" replace />;
}

// Example: Blog post with category and slug
<Route path="blog/:category/:slug" element={<BlogPost />} />

// In component:
function BlogPost() {
  const { category, slug } = useParams<{ category: string; slug: string }>();

  // URL: /blog/tutorials/react-hooks
  // category = "tutorials"
  // slug = "react-hooks"

  return <div>Category: {category}, Slug: {slug}</div>;
}

// Optional parameter with '?'
<Route path="users/:id?" element={<UserList />} />

// In component:
function UserList() {
  const { id } = useParams<{ id?: string }>();

  if (id) {
    // Show specific user
    return <UserDetail userId={id} />;
  }

  // Show all users
  return <AllUsers />;
}

// src/pages/Docs.tsx - Version 7: With search functionality
import { Link, useSearchParams } from 'react-router-dom';
import { getAllDocs } from '../data/docs';
import { useState, useEffect } from 'react';

export function Docs() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [searchQuery, setSearchQuery] = useState(searchParams.get('q') || '');

  const docs = getAllDocs();

  // Filter docs based on search query
  const filteredDocs = searchQuery
    ? docs.filter(doc => 
        doc.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        doc.content.toLowerCase().includes(searchQuery.toLowerCase())
      )
    : docs;

  // Group filtered docs by category
  const categories = filteredDocs.reduce((acc, doc) => {
    if (!acc[doc.category]) {
      acc[doc.category] = [];
    }
    acc[doc.category].push(doc);
    return acc;
  }, {} as Record<string, typeof docs>);

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();

    if (searchQuery.trim()) {
      // Update URL with search query
      setSearchParams({ q: searchQuery });
    } else {
      // Remove search query from URL
      setSearchParams({});
    }
  };

  const handleClearSearch = () => {
    setSearchQuery('');
    setSearchParams({});
  };

  return (
    <div>
      <h1>Documentation</h1>

      <form onSubmit={handleSearch} style={{ marginBottom: '2rem' }}>
        <input
          type="text"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          placeholder="Search documentation..."
          style={{ padding: '0.5rem', width: '300px' }}
        />
        <button type="submit" style={{ marginLeft: '0.5rem' }}>
          Search
        </button>
        {searchParams.get('q') && (
          <button 
            type="button" 
            onClick={handleClearSearch}
            style={{ marginLeft: '0.5rem' }}
          >
            Clear
          </button>
        )}
      </form>

      {searchParams.get('q') && (
        <p style={{ color: '#666', marginBottom: '1rem' }}>
          Found {filteredDocs.length} result(s) for "{searchParams.get('q')}"
        </p>
      )}

      {Object.keys(categories).length === 0 ? (
        <p>No documentation found matching your search.</p>
      ) : (
        Object.entries(categories).map(([category, categoryDocs]) => (
          <div key={category} style={{ marginBottom: '2rem' }}>
            <h2>{category}</h2>
            <ul>
              {categoryDocs.map(doc => (
                <li key={doc.id}>
                  <Link to={`/docs/${doc.id}`}>{doc.title}</Link>
                </li>
              ))}
            </ul>
          </div>
        ))
      )}
    </div>
  );
}

const [searchParams, setSearchParams] = useSearchParams();

// Reading query parameters
const query = searchParams.get('q');           // Single value
const page = searchParams.get('page');         // Another parameter
const tags = searchParams.getAll('tag');       // Multiple values with same key

// Setting query parameters
setSearchParams({ q: 'hooks' });               // ?q=hooks
setSearchParams({ q: 'hooks', page: '2' });    // ?q=hooks&page=2

// Updating existing parameters
setSearchParams(prev => {
  prev.set('page', '3');                       // Update one parameter
  return prev;
});

// Removing parameters
setSearchParams(prev => {
  prev.delete('q');                            // Remove one parameter
  return prev;
});

// Clear all parameters
setSearchParams({});

import { useSearchParams } from 'react-router-dom';

function DocPage() {
  const [searchParams] = useSearchParams();

  // Read parameters directly
  const version = searchParams.get('version') || '1.0';
  const highlight = searchParams.get('highlight');

  return (
    <div>
      <p>Viewing version: {version}</p>
      {highlight && <p>Highlighting: {highlight}</p>}
    </div>
  );
}

// Route with both parameter and query string
<Route path="docs/:id" element={<DocPage />} />

// Component using both
function DocPage() {
  const { id } = useParams<{ id: string }>();
  const [searchParams] = useSearchParams();

  const version = searchParams.get('version');
  const highlight = searchParams.get('highlight');

  // URL: /docs/api-reference?version=2.0&highlight=useState
  // id = "api-reference"
  // version = "2.0"
  // highlight = "useState"

  return (
    <div>
      <h1>Doc: {id}</h1>
      {version && <p>Version: {version}</p>}
      {highlight && <p>Highlighting: {highlight}</p>}
    </div>
  );
}

src/
├── components/
│   ├── Layout.tsx              ← Main site layout
│   ├── GuidesLayout.tsx        ← New: Guides section layout
│   └── ApiLayout.tsx           ← New: API section layout
├── pages/
│   ├── Home.tsx
│   ├── Docs.tsx
│   ├── guides/                 ← New: Guides section pages
│   │   ├── GettingStarted.tsx
│   │   ├── Installation.tsx
│   │   └── Configuration.tsx
│   ├── api/                    ← New: API section pages
│   │   ├── Overview.tsx
│   │   ├── Authentication.tsx
│   │   └── Endpoints.tsx
│   ├── About.tsx
│   └── NotFound.tsx
└── App.tsx

// src/pages/guides/GettingStarted.tsx - New file
export function GettingStarted() {
  return (
    <article>
      <h1>Getting Started</h1>
      <p>Welcome to our product! This guide will help you get up and running quickly.</p>

      <h2>Prerequisites</h2>
      <ul>
        <li>Node.js 18 or higher</li>
        <li>npm or yarn</li>
        <li>Basic JavaScript knowledge</li>
      </ul>

      <h2>Quick Start</h2>
      <p>Follow these steps to create your first project...</p>
    </article>
  );
}

// src/pages/guides/Installation.tsx - New file
export function Installation() {
  return (
    <article>
      <h1>Installation</h1>
      <p>Learn how to install our product in your project.</p>

      <h2>Using npm</h2>
      <pre>npm install our-product

yarn add our-product

// src/pages/guides/Configuration.tsx - New file
export function Configuration() {
  return (
    <article>
      <h1>Configuration</h1>
      <p>Configure our product to match your needs.</p>

      <h2>Basic Configuration</h2>
      <p>Create a config file in your project root...</p>

      <h2>Advanced Options</h2>
      <p>For advanced use cases, you can customize...</p>
    </article>
  );
}

// src/components/GuidesLayout.tsx - New file: Section-specific layout
import { NavLink, Outlet } from 'react-router-dom';

export function GuidesLayout() {
  return (
    <div style={{ display: 'flex', gap: '2rem' }}>
      {/* Sidebar navigation for guides section */}
      <aside style={{ 
        width: '200px', 
        borderRight: '1px solid #ddd',
        paddingRight: '1rem'
      }}>
        <h2 style={{ fontSize: '1.2rem', marginBottom: '1rem' }}>Guides</h2>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
          <NavLink 
            to="/guides/getting-started"
            className={({ isActive }) => isActive ? 'active' : ''}
            style={({ isActive }) => ({
              padding: '0.5rem',
              textDecoration: 'none',
              color: isActive ? '#007bff' : '#333',
              background: isActive ? '#e3f2fd' : 'transparent',
              borderRadius: '4px'
            })}
          >
            Getting Started
          </NavLink>
          <NavLink 
            to="/guides/installation"
            className={({ isActive }) => isActive ? 'active' : ''}
            style={({ isActive }) => ({
              padding: '0.5rem',
              textDecoration: 'none',
              color: isActive ? '#007bff' : '#333',
              background: isActive ? '#e3f2fd' : 'transparent',
              borderRadius: '4px'
            })}
          >
            Installation
          </NavLink>
          <NavLink 
            to="/guides/configuration"
            className={({ isActive }) => isActive ? 'active' : ''}
            style={({ isActive }) => ({
              padding: '0.5rem',
              textDecoration: 'none',
              color: isActive ? '#007bff' : '#333',
              background: isActive ? '#e3f2fd' : 'transparent',
              borderRadius: '4px'
            })}
          >
            Configuration
          </NavLink>
        </nav>
      </aside>

      {/* Content area where child routes render */}
      <main style={{ flex: 1 }}>
        <Outlet />
      </main>
    </div>
  );
}

// src/App.tsx - Version 6: With nested routes
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import { GuidesLayout } from './components/GuidesLayout';
import { Home } from './pages/Home';
import { Docs } from './pages/Docs';
import { GettingStarted } from './pages/guides/GettingStarted';
import { Installation } from './pages/guides/Installation';
import { Configuration } from './pages/guides/Configuration';
import { About } from './pages/About';
import { NotFound } from './pages/NotFound';

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Main site layout */}
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="docs" element={<Docs />} />

          {/* Nested guides section with its own layout */}
          <Route path="guides" element={<GuidesLayout />}>
            <Route index element={<GettingStarted />} />
            <Route path="getting-started" element={<GettingStarted />} />
            <Route path="installation" element={<Installation />} />
            <Route path="configuration" element={<Configuration />} />
          </Route>

          <Route path="about" element={<About />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

// src/components/Layout.tsx - Version 3: Updated navigation
import { NavLink, Outlet } from 'react-router-dom';

export function Layout() {
  return (
    <div className="app-layout">
      <header>
        <nav className="main-nav" style={{ 
          display: 'flex', 
          gap: '1rem', 
          padding: '1rem',
          background: '#f5f5f5',
          borderBottom: '2px solid #ddd'
        }}>
          <NavLink 
            to="/"
            style={({ isActive }) => ({
              padding: '0.5rem 1rem',
              textDecoration: 'none',
              color: isActive ? 'white' : '#333',
              background: isActive ? '#007bff' : 'transparent',
              borderRadius: '4px'
            })}
          >
            Home
          </NavLink>
          <NavLink 
            to="/docs"
            style={({ isActive }) => ({
              padding: '0.5rem 1rem',
              textDecoration: 'none',
              color: isActive ? 'white' : '#333',
              background: isActive ? '#007bff' : 'transparent',
              borderRadius: '4px'
            })}
          >
            Docs
          </NavLink>
          <NavLink 
            to="/guides"
            style={({ isActive }) => ({
              padding: '0.5rem 1rem',
              textDecoration: 'none',
              color: isActive ? 'white' : '#333',
              background: isActive ? '#007bff' : 'transparent',
              borderRadius: '4px'
            })}
          >
            Guides
          </NavLink>
          <NavLink 
            to="/about"
            style={({ isActive }) => ({
              padding: '0.5rem 1rem',
              textDecoration: 'none',
              color: isActive ? 'white' : '#333',
              background: isActive ? '#007bff' : 'transparent',
              borderRadius: '4px'
            })}
          >
            About
          </NavLink>
        </nav>
      </header>

      <main style={{ padding: '2rem' }}>
        <Outlet />
      </main>

      <footer style={{ 
        padding: '1rem', 
        background: '#f5f5f5',
        borderTop: '1px solid #ddd',
        textAlign: 'center'
      }}>
        <p>© 2025 Documentation Site</p>
      </footer>
    </div>
  );
}

// src/pages/api/Overview.tsx - New file
export function Overview() {
  return (
    <article>
      <h1>API Overview</h1>
      <p>Our API provides programmatic access to all product features.</p>

      <h2>Base URL</h2>
      <pre>https://api.example.com/v1

// src/pages/api/Authentication.tsx - New file
export function Authentication() {
  return (
    <article>
      <h1>Authentication</h1>
      <p>Learn how to authenticate your API requests.</p>

      <h2>API Keys</h2>
      <p>Generate an API key from your dashboard...</p>

      <h2>Using Your Key</h2>
      <pre>Authorization: Bearer YOUR_API_KEY

// src/pages/api/Endpoints.tsx - New file
export function Endpoints() {
  return (
    <article>
      <h1>API Endpoints</h1>
      <p>Complete reference of all available endpoints.</p>

      <h2>Users</h2>
      <ul>
        <li>GET /users

GET /users/:id

POST /users

GET /products

GET /products/:id

// src/components/ApiLayout.tsx - New file
import { NavLink, Outlet } from 'react-router-dom';

export function ApiLayout() {
  return (
    <div style={{ display: 'flex', gap: '2rem' }}>
      <aside style={{ 
        width: '200px', 
        borderRight: '1px solid #ddd',
        paddingRight: '1rem'
      }}>
        <h2 style={{ fontSize: '1.2rem', marginBottom: '1rem' }}>API Reference</h2>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
          <NavLink 
            to="/api/overview"
            style={({ isActive }) => ({
              padding: '0.5rem',
              textDecoration: 'none',
              color: isActive ? '#007bff' : '#333',
              background: isActive ? '#e3f2fd' : 'transparent',
              borderRadius: '4px'
            })}
          >
            Overview
          </NavLink>
          <NavLink 
            to="/api/authentication"
            style={({ isActive }) => ({
              padding: '0.5rem',
              textDecoration: 'none',
              color: isActive ? '#007bff' : '#333',
              background: isActive ? '#e3f2fd' : 'transparent',
              borderRadius: '4px'
            })}
          >
            Authentication
          </NavLink>
          <NavLink 
            to="/api/endpoints"
            style={({ isActive }) => ({
              padding: '0.5rem',
              textDecoration: 'none',
              color: isActive ? '#007bff' : '#333',
              background: isActive ? '#e3f2fd' : 'transparent',
              borderRadius: '4px'
            })}
          >
            Endpoints
          </NavLink>
        </nav>
      </aside>

      <main style={{ flex: 1 }}>
        <Outlet />
      </main>
    </div>
  );
}

// src/App.tsx - Version 7: With both nested sections
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Layout } from './components/Layout';
import { GuidesLayout } from './components/GuidesLayout';
import { ApiLayout } from './components/ApiLayout';
import { Home } from './pages/Home';
import { Docs } from './pages/Docs';
import { GettingStarted } from './pages/guides/GettingStarted';
import { Installation } from './pages/guides/Installation';
import { Configuration } from './pages/guides/Configuration';
import { Overview } from './pages/api/Overview';
import { Authentication } from './pages/api/Authentication';
import { Endpoints } from './pages/api/Endpoints';
import { About } from './pages/About';
import { NotFound } from './pages/NotFound';

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="docs" element={<Docs />} />

          {/* Guides section */}
          <Route path="guides" element={<GuidesLayout />}>
            <Route index element={<GettingStarted />} />
            <Route path="getting-started" element={<GettingStarted />} />
            <Route path="installation" element={<Installation />} />
            <Route path="configuration" element={<Configuration />} />
          </Route>

          {/* API section */}
          <Route path="api" element={<ApiLayout />}>
            <Route index element={<Overview />} />
            <Route path="overview" element={<Overview />} />
            <Route path="authentication" element={<Authentication />} />
            <Route path="endpoints" element={<Endpoints />} />
          </Route>

          <Route path="about" element={<About />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}